<template>
  <div class="monitor-box">
    <CardBox title="物种相对多度"> </CardBox>
    <div class="content-container">
      <div class="statistics-chart" ref="speciesChart"></div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
import * as echarts from "echarts";

export default {
  name: "Introduce",
  components: {
    CardBox,
  },
  data() {
    return {
      introduce:'',
    };
  },
  created() {
    EventBus.$on('set-multi-introduce', (message) => {
      this.introduce=message;
    });
  },
  mounted() {
    this.$api.species.getSpeciesTree("鸟类").then(res => {
      this.initChart(res)
    });
  },
  methods: {
    initChart(data) {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return

      const chart = echarts.init(chartDom,'dark')
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['2025年1月','2025年2月','2025年3月','2025年4月','2025年5月','2025年6月','2025年7月','2025年8月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [ {
          name: '东北刺猬',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [4.58,10.51,19.35,0.32,13.31,8.38,5.38,3.49]
        },{
          name: '赤腹松鼠',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.27,0.72,1.88,0.32,0,0.28,0,0]
        },{
          name: '黄鼬',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [1.89,0.36,0.27,0,0.57,0.28,0.27,0.54]
        },{
          name: '珠颈斑鸠',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [101.89,73.19,89.25,19.43,21.81,22.91,31.99,20.7]
        },{
          name: '乌鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [6.2,10.87,50,15.61,21.53,22.91,22.58,18.82]
        },{
          name: '灰喜鹊',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [16.17,7.97,7.53,3.5,4.25,4.47,4.84,3.76]
        },{
          name: '白腹鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [1.35,1.45,1,61,0,0,0,0,0]
        },{
          name: '黑水鸡',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.81,0.36,0.27,0,1.13,0.28,0,0]
        },{
          name: '虎斑地鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.81,0,0.27,0,0,0,0,0]
        },{
          name: '山斑鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.54,0,0.81,0.32,0,0,0.27,0]
        },{
          name: '灰椋鸟',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0,0.54,0.32,1.13,0,0,0]
        },{
          name: '喜鹊',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0,0,1.08,0.64,0,0,0,0]
        },{
          name: '灰背鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0,0,0.54,0.96,0,0,0,0]
        },{
          name: '鹊鸲',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.27, 0.36,0.54,0,0,0.28,0,0]
        },{
          name: '戴胜',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0,0,0,0,0.56,0,0]
        },{
          name: '斑鸫',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.54,0.36,0,0,0,0,0.27,0]
        },{
          name: '白头鹎',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0.36,0,0,0.28,0,1.08]
        },{
          name: '夜鹭',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0.27, 0,0,0,0,0,0,0.54]
        },{
          name: '白颊噪鹛',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0.28, 0,0,0]
        },{
          name: '红嘴蓝鹊',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0,0,0]
        },{
          name: '黑脸噪鹛',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0,0.54,0]
        },{
          name: '八哥',
          type: 'bar',
          stack: '鸟类',
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0.57, 0,0,0]
        },
        ]
      }
      chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>

.statistics-chart {
  width: 100%;
  height: 100%;
}
  .content-container{
    height: 380px;
  }
</style>